<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/backStage.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="css/backiconfont/iconfont.css"
    />
    <title>Document</title>
  </head>
  <body>
    <!-- 弹窗 -->
    <div class="mask">
      <div class="window">
        <div class="cancel">x</div>
        <ul id="addinfo">
          <li>
            <label for="">课&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;程</label>
            <input type="text" name="id" autocomplete="off" />
          </li>
          <li>
            <label for="">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
            <select name="" id="add-category">
              <option value="1">公开课/任选课</option>
              <option value="2">公开课/必修课</option>
              <option value="3">专业课/必修课</option>
              <option value="4">实习</option>
            </select>
           
          </li>
          <li>
            <label for=""> 考核方式</label>
            <select name="" id="Method">
              <option value="0">考查</option>
              <option value="1">考试</option>
            </select>
          </li>
          <li>
            <label for="">上课时间</label>

            <input type="text" name="year" autocomplete="off" />
          </li>
          <li>
            <label for=""> 教&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;室</label>
            <input type="text" name="department" autocomplete="off" />
          </li>
          <li>
            <label for=""> 学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分</label>
            <input type="text" name="class" autocomplete="off" />
          </li>
        </ul>
        <button type="button" class="add">添加</button>
      </div>
    </div>
    <!-- 修改弹窗 -->
    <div class="mask-editor">
      <div class="window">
        <div class="cancel">x</div>
        <ul id="changeinfo">
          <li>
            <label for="">课&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;程</label>
            <input type="text" name="id" autocomplete="off" />
          </li>
          <li>
            <label for="">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
            <select name="" id="editor-category">
              <option value="1">公开课/任选课</option>
              <option value="2">公开课/必修课</option>
              <option value="3">专业课/必修课</option>
              <option value="4">实习</option>
            </select>
            
          </li>
          <li>
            <label for=""> 考核方式</label>
            <select name="" id="editor-method">
              <option value="0">考查</option>
              <option value="1">考试</option>
            </select>
          </li>
          <li>
            <label for="">上课时间</label>

            <input type="text" name="year" autocomplete="off" />
          </li>
          <li>
            <label for=""> 教&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;室</label>
            <input type="text" name="department" autocomplete="off" />
          </li>
          <li>
            <label for=""> 学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分</label>
            <input type="text" name="class" autocomplete="off" />
          </li>
        </ul>
        <button type="button" class="editor">确认修改</button>
      </div>
    </div>
    <!-- confirm 弹窗 -->
    <div class="confirm-mask">
      <div class="confirm-window">
        <div class="confirm-top">
          <span>系统提示</span>
          <div class="confirm-cancel">X</div>
        </div>
        <div class="confirm-content">
          <i class="iconfont">&#xe603;</i>
          <span>提示消息</span>
        </div>
        <div class="confirm-button">
          <button class="c-sure">确定</button>
          <button class="c-cancel">取消</button>
        </div>
      </div>
    </div>
    <!-- alert 弹窗 -->
    <div class="alert"><i class="iconfont">&#xe604;</i><span>提示消息</span></div>
    <div class="top">
      <i class="iconfont">&#xe655;</i>
      学校课程管理系统
      <button type="button" class="backBtn">
        <i class="iconfont back">&#xe620;</i>
      </button>
    </div>
    <div class="viewport">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <ul class="header">
          <div class="head-img">
            <img src="img/head.jpg" alt="" />
          </div>
          <p>Gloria</p>
        </ul>
        <ul class="nav">
          <li><i class="iconfont">&#xe609;</i>&nbsp;教师课程信息管理</li>
          <li><i class="iconfont">&#xe605;</i>&nbsp;课程</li>
          <li><i class="iconfont">&#xe62a;</i>&nbsp;管理员信息管理</li>
          <li><i class="iconfont">&#xe686;</i>&nbsp;部门管理</li>
          <li><i class="iconfont">&#xe637;</i>&nbsp;设置</li>
        </ul>
      </div>
      <div class="content">
        <p>教师课程信息管理</p>
        <div class="info">
          <!-- 添加 -->
          <div id="search-add">
            <div class="search">
              <input
                type="text"
                name="search"
                placeholder="请输入课程名"
                autocomplete="off"
              />
              <button type="button" id="search">
                <i class="iconfont">&#xe621;</i>查询
              </button>
            </div>
            <button type="button" class="addBtn">
              <i class="iconfont">&#xe61f; </i>添加
            </button>
            <button class="checkBtn">
              <i class="iconfont">&#xe61c;</i>删除所选课程
            </button>
          </div>
          <!--刷新模块  -->
          <div class="refresh">
            <button type="button" class="fresh">
              <i class="iconfont">&#xe641;</i>
            </button>
          </div>
          <!-- 学生内容 -->
          <div id="stu-info">
            <table id="stu">
              <caption>
                课程信息
              </caption>
              <thead>
                <tr>
                  <th><input type="checkbox" class="checkAll" />全选</th>
                  <th>序号</th>
                  <th>课程</th>
                  <th>类别</th>
                  <th>上课时间</th>
                  <th>教室</th>
                  <th>学分</th>
                  <th>考核方式</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="tb">
                <tr>
                  <td><input type="checkbox" class="check" /></td>
                  <td>1</td>
                  <td>高数</td>
                  <td>专业课/必修课</td>
                  <td>1~2节</td>
                  <td>九合一</td>
                  <td>2</td>
                  <td>考试</td>
                  <td>
                    <button type="button" class="remove" onclick="delRow(this)">
                      <i class="iconfont">&#xe61c;</i>
                    </button>
                    <button
                      type="button"
                      class="edit"
                      onclick="updateRow(this)"
                    >
                      <i class="iconfont">&#xe8cf;</i>
                    </button>
                  </td>
                </tr>
              </tbody>
              <tfoot></tfoot>
            </table>
          </div>
          <div class="page">
            <button class="last"><</i></button>
            <span class="nowpage">第1页</span>
            <button class="next">></i></button>
            <span class="total-count">共0条</span>
          </div>
        </div>
      </div>
    </div>
   
  </body>
  <script type="text/javascript" src="js/jquery3.7.1.min.js"></script>
  <script type="text/javascript" src="js/backstage.js"></script>
</html>
